Необходимо:

поднять проект шаблон на Vite

Требования:

использовать функциональные компоненты

использовать шаблон с typescript

пропсы для компонентов должны быть типизированы (без использования any)

учесть, что некоторые компоненты могут в дальнейшем переиспользоваться на других страницах

использовать один из трёх вариантов работы со стилями:

обычные css-файлы (как в дефолтном шаблоне) с использованием БЕМ-методологии

css-modules

styled components

нельзя использовать UI библиотеки для написания стилей, все стили должны быть описаны только в коде самого проекта

необходимо использовать правильные шрифты, их можно скачать с https://fonts.google.com/, найти по тому названию, которое указано в Figma

данные для вёрстки необходимо захардкодить, формы не должны никуда отправлять данные

необходимые состояния компонентов (сворачивание/разворачивание элементов и прочее) должны обрабатываться с помощью стандартных хуков react-a (без стейт-менеджеров)

проект должен запускаться локально в dev-режиме, если для его запуска необходимы дополнительные действия, нужно прописать их в файле Readme

Дополнительные баллы (помимо 10 баллов за стандартное задание) можно получить за следующие улучшения:

pixel perfect: будет проверяться только тот размер экрана, который реализован в макетах, с помощью специального плагина - максимум 5 баллов

адаптивность и мобильный вид: самостоятельно поддержать адаптивность макета для всех расширений экрана от указанного в макетах до 320px (самый маленький экран мобильного телефона) - максимум 5 баллов

анимации: добавить указанные в макетах анимации - максимум 2 балла

a11y: задано правильное дерево заголовков, используется семантическая вёрстка, используются атрибуты alt у картинок, используются aria-* атрибуты, где необходимо - максимум 4 балла

оптимизация загрузки ресурсов: оптимизированы картинки и шрифты - максимум 3 балла

Дополнительные баллы будут начисляться за каждый из пунктов отдельно, так что можно реализовать как все их них и получить максимум баллов, так и часть из них.

Что можно реализовать уже сейчас, но это будет учитываться при оценке финального проекта:

использую Atomic Design
Ссылка на макет:

Вариант 1: https://www.figma.com/file/TjRJ7LLNtMTWGAt13VWqCw/2-задание%3A-вёрстка-%2B-React?type=design&node-id=0-1&mode=design&t=2lk79ibXvQKCvzwA-0